<template>
  <div>
    <Editor api-key="n84rpcpk3u22bnr0oy1q9s8w78975r67ivfdosf04jwv6pn2" :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue"></Editor>  
  </div>
</template>

<script>
  // 引入tinymce-vue
  import Editor from '@tinymce/tinymce-vue'
  import {zyOffice} from '../../static/zyoffice/js/w'

  export default {
    components: {
      Editor
    },
    props: {
      // 编号
      id: {
        type: String
      },
      // 内容
      value: {
        type: String,
        default: ''
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 插件
      plugins: {
          type: [String, Array],
          // default: 'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars'
          default: 'autolink autosave image imagetools paste preview zyoffice zywordexport zyofficepdf'
      },

      // 工具栏
      toolbar: {
        type: [String, Array],
        default: 'bold italic underline forecolor fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry | image zyoffice zywordexport zyofficepdf'
      },

      images_upload_url: '/demo/upimg.php',
      images_upload_base_path: '/demo',
      keep_styles: true
    },
      mounted: function () {
          // 初始化
          zyOffice.getInstance({
            word: 'http://localhost:13710/zyoffice/word/convert',
            wordExport: 'http://localhost:13710/zyoffice/word/export',
            pdf: 'http://localhost:13710/zyoffice/pdf/upload'            
          })
      },
    data () {
      return {
        tinymceId: this.id || 'vue-tinymce' + Date.parse(new Date()),
        myValue: this.value,
        init: {
          selector: 'textarea',
          // 汉化,路径是自定义的，一般放在public或static里面，汉化文件要自己去下载
          language_url: '/tinymce/zh_CN.js',
          language: 'zh_CN',
          // 皮肤
          skin: 'oxide',
          // 隐藏技术支持
          branding: false,
          // 隐藏底栏的元素路径
          elementpath: false,
          // 关闭菜单
          menubar: false,
          // 隐藏状态栏
          statusbar: false,
          // 公式插件
          external_plugins: {
            zyoffice: '../../static/zyoffice/plugin/zyoffice.js',
            zywordexport: '../../static/zyoffice/plugin/zywordexport.js',
            zyofficepdf: '../../static/zyoffice/plugin/zyofficepdf.js'
          },
          // 插件
          plugins: this.plugins,
          // 工具栏
          toolbar: this.toolbar,
          // 高度
          height: 200,
          // 粘贴data格式的图像
          paste_data_images: true,
          width: 900,
          setup: function (edt) {
          }
        }
      }
    },
    methods: {

    },
    watch: {
      // 监听内容变化
      value (newValue) {
        this.myValue = newValue
      },
      myValue (newValue) {
        this.$emit('input', newValue)
      }
    }
  }
</script>
<style>
  .tox-notifications-container {
    display: none;
  }

  .tox-tinymce-aux {
    z-index: 5000 !important;
  }
</style>
